<template>
	<view class="contract-detail">
		<view class="contract-item">{{data.info.roomName}}</view>
		<view class="contract-item">
			<view class="item">
				<span class="item-1">姓名：</span>
				<span class="item-2">{{data.info.customerName}}</span>
			</view>
			<view class="item">
				<span class="item-1">手机号：</span>
				<span class="item-2">{{data.info.customerPhone}}</span>
			</view>
			<view class="item">
				<span class="item-1">身份证号：</span>
				<span class="item-2">{{data.info.customerIdNumber}}</span>
			</view>
		</view>
		<view class="contract-item">
			<view class="item">
				<span class="item-1">租赁时间：</span>
				<span class="item-2">{{timestamp(data.info.startTime)}}~{{timestamp(data.info.endTime)}}</span>
			</view>
			<view class="item">
				<span class="item-1">月租金额：</span>
				<span class="item-2">{{data.info.monthRent}} 元</span>
			</view>
			<view class="item">
				<span class="item-1">押金金额：</span>
				<span class="item-2">{{data.info.deposit}} 元</span>
			</view>
			<view class="item">
				<span class="item-1">支付方式：</span>
				<span class="item-2" v-if="data.info.payMethodF == 1">月付</span>
				<span class="item-2" v-if="data.info.payMethodF == 3">季付</span>
				<span class="item-2" v-if="data.info.payMethodF == 6">半年付</span>
				<span class="item-2" v-if="data.info.payMethodF == 12">年付</span>
			</view>
			<view class="item">
				<span class="item-1">收租时间：</span>
				<span class="item-2">提前{{data.info.advancedDays}}天收租</span>
			</view>
			<view class="item" v-if="data.info.remark">
				<span class="item-1">合同备注：</span>
				<span class="item-2">{{data.info.remark}}</span>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { getLandlordContractDetail } from '@/common/API/contract'
import { onLoad} from "@dcloudio/uni-app"
import { reactive } from "vue";
import dayjs  from "dayjs"

const data = reactive({
	info: {}
})
const getDetail = async (id) => {
	uni.showLoading({
		title:'加载中...'
	});
	let res = await getLandlordContractDetail(id)
	data.info = res
	uni.hideLoading()
}
onLoad((options)=>{
	if(options){
		getDetail(options.id)
	}
})
//处理时间戳
const timestamp = (val:any,s) => {
	return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}
</script>

<style lang="scss" scoped>
	.contract-detail{
		.contract-item{
			padding: 32rpx;
			background: #fff;
			margin-top: 20rpx;
			color: rgba(51, 51, 51, 1);
			font-size: 30rpx;
			.item{
				display: flex;
				.item-1{
					width: 140rpx;
					color: rgba(102, 102, 102, 1);
					font-size: 26rpx;
					margin-right: 25rpx;
					text-align-last: justify;
					text-align: justify;
				}
				.item-2{
					flex: 1;
					color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
				}
				.item-3{
					flex: 1;
					font-size: 26rpx;
					color: rgba(48, 127, 255, 1);
				}
			}
		}
	}
</style>